import React from 'react';
import * as am4core from '@amcharts/amcharts4/core'
import * as am4charts from '@amcharts/amcharts4/charts'
import * as am4plugins_overlapBuster from "@amcharts/amcharts4/plugins/overlapBuster";

// import am4themes_animated from '@amcharts/amcharts4/themes/animated'
import Logo from '../../logo.svg'

export default class LineAmcharts extends React.Component {
  getChartData = () => {
    const data = [{
      "year": "2003",
      "europe": 2.5,
      "namerica": 2.5,
      // "asia": 2.1,
      // "lamerica": 1.2,
      "meast": 0.2,
      "africa": 0.1,
      "motorcycles": 0.3,
      "series1": "https://www.amcharts.com/lib/images/faces/A04.png",
      "series2": "https://www.amcharts.com/lib/images/faces/C02.png",
      "series3": "https://www.amcharts.com/lib/images/faces/D02.png",

    }, {
      "year": "2004",
      "europe": 2.6,
      "namerica": 2.7,
      "asia": 2.2,
      "lamerica": 1.3,
      "meast": 0.3,
      "africa": 0.1,
      "series2": "https://www.amcharts.com/lib/images/faces/C02.png",
      "motorcycles": 0.5,

    }, {
      "year": "2005",
      "europe": 2.8,
      "namerica": 2.9,
      "asia": 2.4,
      "lamerica": 1.4,
      "meast": 0.3,
      "africa": 0.1,
      "motorcycles": 0.2,

    }];;
    return data
  }
  createValueAxis = () => {
    let chart = this.chart
    let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "year";
    // categoryAxis.title.text = "Local country offices";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 20;
    categoryAxis.renderer.cellStartLocation = 0.1;
    categoryAxis.renderer.cellEndLocation = 0.9;
    return categoryAxis
  }
  createYAxis = () => {
    let chart = this.chart
    let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.min = 0;
    valueAxis.title.text = "Expenditure (M)";
    return valueAxis
  }
  createOne = () => {
    let chart = this.chart
    let series = chart.series.push(new am4charts.LineSeries())
    series.dataFields.categoryX = 'year'
    series.name = 'cars'
    series.dataFields.valueY = 'namerica'
    series.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
    series.tooltipText = "[#000]{valueY.value}[/]";
    series.tooltip.background.fill = am4core.color("#FFF");
    series.tooltip.getStrokeFromObject = true;
    series.tooltip.background.strokeWidth = 3;
    series.tooltip.getFillFromObject = false;
    series.fillOpacity = 0.2;
    series.strokeWidth = 0;
    series.stacked = true;
    series.sequencedInterpolation = true

    let bullet = series.bullets.push(new am4charts.Bullet());
    let image = bullet.createChild(am4core.Image);
    image.horizontalCenter = "middle";
    image.verticalCenter = "bottom";
    image.dy = 0;
    image.y = am4core.percent(100);
    image.propertyFields.href = "series1";
    // image.adapter.add('href', (a, b, c) => {
    //   console.log(a, b, c)
    //   return "series1"
    // })
    // image.tooltipText = series.value.tooltipText;
    image.propertyFields.fill = "color";
    image.filters.push(new am4core.DropShadowFilter());

    // 添加渐变色
    let gradient = new am4core.LinearGradient();
    gradient.addColor('#018580')
    gradient.addColor('white');
    gradient.rotation += 90
    series.fill = gradient;
    let overlap = chart.plugins.push(new am4plugins_overlapBuster.OverlapBuster());
    overlap.targets.push(bullet);
  }
  createTwo = () => {
    let chart = this.chart
    let series2 = chart.series.push(new am4charts.LineSeries());
    series2.name = "Europe1";
    series2.dataFields.categoryX = "year";
    series2.dataFields.valueY = "motorcycles";
    series2.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
    series2.tooltipText = "[#000]{valueY.value}[/]";
    series2.tooltip.background.fill = am4core.color("#FFF");
    series2.tooltip.getFillFromObject = false;
    series2.tooltip.getStrokeFromObject = true;
    series2.tooltip.background.strokeWidth = 3;
    series2.sequencedInterpolation = true;
    series2.fillOpacity = 0.6;
    series2.stacked = true;
    series2.strokeWidth = 0;

    let bullet = series2.bullets.push(new am4charts.Bullet());
    let image = bullet.createChild(am4core.Image);
    image.horizontalCenter = "middle";
    image.verticalCenter = "bottom";
    image.dy = 20;
    image.y = am4core.percent(100);
    image.propertyFields.href = "series2";
    // image.tooltipText = series.value.tooltipText;
    image.propertyFields.fill = "color";
    image.filters.push(new am4core.DropShadowFilter());

    let gradient = new am4core.LinearGradient();
    gradient.addColor('#1564B5')
    gradient.addColor('white');
    gradient.rotation += 90
    series2.fill = gradient;
    let overlap = chart.plugins.push(new am4plugins_overlapBuster.OverlapBuster());
    overlap.targets.push(bullet);
  }
  createThree = () => {
    let chart = this.chart
    let series3 = chart.series.push(new am4charts.LineSeries());
    series3.name = "bicycles";
    series3.dataFields.categoryX = "year";
    series3.dataFields.valueY = "africa";
    series3.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
    series3.tooltipText = "[#000]{valueY.value}[/]";
    series3.tooltip.background.fill = am4core.color("#FFF");
    series3.tooltip.getFillFromObject = false;
    series3.tooltip.getStrokeFromObject = true;
    series3.tooltip.background.strokeWidth = 3;
    series3.sequencedInterpolation = true;
    series3.fillOpacity = 0.6;
    series3.defaultState.transitionDuration = 1000;
    series3.stacked = true;
    series3.strokeWidth = 0;

    let bullet = series3.bullets.push(new am4charts.Bullet());
    let image = bullet.createChild(am4core.Image);
    image.horizontalCenter = "middle";
    image.verticalCenter = "bottom";
    image.dy = 20;
    image.y = am4core.percent(100);
    image.propertyFields.href = "series3";
    // image.tooltipText = series.value.tooltipText;
    image.propertyFields.fill = "color";
    image.filters.push(new am4core.DropShadowFilter());
    let overlap = chart.plugins.push(new am4plugins_overlapBuster.OverlapBuster());
    overlap.targets.push(bullet);
  }
  createSeries = (field, name, stacked, opacity = 1) => {
    let chart = this.chart
    let series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = field;
    series.dataFields.categoryX = "year";
    series.name = name;
    // series.columns.template.tooltipText = "{name}: [bold]{valueY}[/]";
    // 控制堆叠的属性
    series.stacked = stacked;
    // 通过透明度 来控制 显示和隐藏
    series.opacity = opacity
    series.columns.template.width = am4core.percent(70);

  }
  optionChart = () => {
    let chart = this.chart
    // chart.cursor = new am4charts.XYCursor();
    // chart.cursor.xAxis = this.X;
    // chart.scrollbarX = new am4core.Scrollbar();

    // Add a legend
    chart.legend = new am4charts.Legend();
    chart.legend.position = "top";

    // // axis ranges
    let range = this.X.axisRanges.create();
    range.value = 2001
    range.endValue = 2003
    range.axisFill.fill = chart.colors.getIndex(7);
    range.axisFill.fillOpacity = 0.2;

    range.label.text = "Fines for speeding increased";
    range.label.inside = true;
    range.label.rotation = 90;
    range.label.horizontalCenter = "right";
    range.label.verticalCenter = "bottom";

    let range2 = this.X.axisRanges.create();
    range2.value = 2007
    range2.grid.stroke = chart.colors.getIndex(7);
    range2.grid.strokeOpacity = 0.6;
    range2.grid.strokeDasharray = "5,2";


    range2.label.text = "Motorcycle fee introduced";
    range2.label.inside = true;
    range2.label.rotation = 90;
    range2.label.horizontalCenter = "right";
    range2.label.verticalCenter = "bottom";
  }
  initAmchart() {
    let chart = this.chart
    chart.data = this.getChartData()
    // chart.numberFormatter.numberFormat = '####'
    this.X = this.createValueAxis()
    this.Y = this.createYAxis()
    this.createSeries("europe", "Europe", false);
    this.createSeries("namerica", "North America", true);
    this.createSeries("asia", "Asia", false);
    this.createSeries("lamerica", "Latin America", true, 0);
    this.createSeries("meast", "Middle East", false);
    this.createSeries("africa", "Africa", true);
    this.createOne()
    this.createTwo()
    this.createThree()
    // Add legend
    chart.legend = new am4charts.Legend();
    // this.optionChart()

  }
  componentDidMount() {
    // Create chart instance
    // Themes begin
    // am4core.useTheme(am4themes_animated);
    // Themes end
    // / Create chart instance
    let chart = am4core.create("chartdiv", am4charts.XYChart);
    this.chart = chart;
    this.initAmchart()
  }
  componentWillUnmount() {
    this.chart.dispose()
  }
  render() {
    return (
      <div id='chartdiv'></div>
    )
  }
}